
.unread-count {
    position: absolute;
    bottom: 1/10rem;
    right: 2/10rem;
    //background-color: @selectBtnColor;
    color: #ffffff;
    border-radius: 5/10rem;
    padding: 1/10rem 3/10rem;
    font-size: 4/10rem;
}

.main-content-wrapper {
    flex: auto;
    //padding-bottom: 9/10rem;
    //margin-top: auto;
    .message-item-wrapper {
        display: flex;
        padding-top: 3/10rem;
        font-size: 0;

        &.message-left {
            .message-text {
                padding-right: 180/10.4/10rem;

                p {
                    border-bottom-left-radius: 2/10rem;
                    transform-origin: left top;
                }
            }

            &.left-transition {
                .avatar {
                    opacity: 0;
                    transform: translateX(-100%);
                }

                .message-text p {
                    transform: scale(0.5);
                    opacity: 0;
                }
            }
        }

        &.message-right {
            text-align: right;
            justify-items: flex-end;

            .message-text {
                padding-left: 180/10.4/10rem;

                p {
                    margin-right: 24/11.4/10rem;
                    border-bottom-right-radius: 2/10rem;
                    //background-color: @selectBtnColor;
                    color: #ffffff;
                }
            }
        }

        &.message-advertising {
            padding: 3/10rem 3/10rem 0 3/10rem;

            .advertising {
                flex: auto;
                box-shadow: 0 1.40625/10rem 3.125/10rem 0.46875/10rem rgba(0, 0, 0, .096);
                border-radius: 2.5/10rem;
                background-color: #fff;
                overflow: hidden;

                &.not-border {
                    box-shadow: none;
                    border: none;
                    border-radius: 0;
                }
            }
        }

        &.max-width {
            padding: 3/10rem 0 0 0;
        }

        &.not-padding {
            padding: 0;
        }
    }

    .message-avatar {
        flex-basis: 180/10.4/10rem;
        padding-left: 42/10.4/10rem;
        display: inline-block;
        padding-top: .5/10rem;

        .avatar {
            width: 110/10.4/10rem;
            overflow: hidden;
            border-radius: 100%;
            box-shadow: 0 4/6.4/10rem 10/6.4/10rem 2/6.4/10rem rgba(0, 0, 0, 0.07);
            z-index: 1;
        }
    }

    .message-text {
        flex: 1;

        > p {
            padding: 35/12.4/10rem;
            border-radius: 70/12.4/10rem;
            border: none;
            background-color: #ffffff;
            display: inline-block;
            text-align: left;
            line-height: 1.3;
            color: #2b2b2b;
            box-shadow: 0 9/6.4/10rem 20/6.4/10rem 3/6.4/10rem rgba(0, 0, 0, 0.096);
            min-width: auto;
            overflow: hidden;

            > .img-h {
                margin: -35/12.4/10rem;
            }

            > .mw-img-i {
                border-radius: 70/12.4/10rem;
            }
        }

        p font,
        p span,
        p {
            font-size: 42/10.4/10rem !important;
        }
    }

    .message-time > div {
        flex: auto;
        font-size: 39/10.4/10rem;
        color: #b6b6b5;
        justify-self: center;
        text-align: center;
    }
}
